<template>
    <div class="form-container">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
            <el-form-item label="品牌名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="品牌首字母" prop="firstLetter">
                <el-input v-model="ruleForm.firstLetter" />
            </el-form-item>
            <el-form-item label="品牌LOGO" prop="logo">
                <el-upload style="width: 100%;" v-model:file-list="logo" class="upload-demo" list-type="picture"
                    action="http://xue.cnkdl.cn:9082/mall-admin/minio/upload" :on-success="handlePreview">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不能超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌专区大图" prop="bigPic">
                <el-upload style="width: 100%;" v-model:file-list="bigPic" class="upload-demo" list-type="picture"
                    action="http://xue.cnkdl.cn:9082/mall-admin/">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不能超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌故事" prop="brandStory">
                <el-input v-model="ruleForm.brandStory" type="textarea" placeholder="请输入内容" :row="0" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="ruleForm.showStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="品牌制造商">
                <el-radio-group v-model="ruleForm.factoryStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance, UploadUserFile } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import * as http from '@/request/http'
import { useRoute } from 'vue-router';


//品牌id
const props = defineProps(['brandItem', 'id'])
const route = useRoute()


//logo和专区大图
const logo = ref<UploadUserFile[]>([])
const bigPic = ref<UploadUserFile[]>([])
//获取logo地址
const handlePreview = (file: IFileModel) => {
    ruleForm.logo = file.data.url
}
//表单验证
const ruleFormRef = ref<FormInstance>()
//品牌表单数据
const ruleForm = reactive({
    name: '',
    firstLetter: '',
    factoryStatus: 0,
    logo: '',
    bigPic: '',
    showStatus: 0,
    sort: 0,
    brandStory: '',
    id: 0
})

//排序自定义校验
const validatePass = (_rule: any, value: any, callback: any) => {
    let reg = /^\d+$/
    if (value === '' && reg.test(value)) {
        callback(new Error('排序必须为数字'))
    } else {
        callback()
    }
}
//表达校验信息
const rules = reactive({
    name: [
        { required: true, message: '请输入品牌名称', trigger: 'blur' },
    ],
    logo: [
        {
            required: true, message: '请输入品牌logo', trigger: 'blur'
        }
    ],
    sort: [{ validator: validatePass, trigger: 'blur' }],
})
//表单效验
const submitForm = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm(
                '是否要添加该品牌',
                '提示',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    http.brand.brandCreate(ruleForm).then(_res => {
                        ElMessage.success('添加成功')
                        ruleFormRef.value?.resetFields()
                    })
                })

        } else {
            ElMessage.error('验证失败')
        }
    })
}

//表单重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

watch(() => route.path, () => {
    Object.assign(ruleForm, props.brandItem)
}
)
</script>

<style scoped lang="less">
.form-container {
    width: 800px;
    padding: 35px 35px 15px 35px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    margin: 20px auto;
}
</style>